<template>
  <div>
    <div class="info">
      <div class="avatar">
        <van-image
          round
          width="100%"
          height="100%"
          :src="`http://localhost:3000${info.head_img}`"
        />
      </div>
      <div class="center" @click="$router.push({path:'/usercompile',query:{id:info.id}})">
        <p class="username">
          <i class="iconfont iconxingbienan" v-if="info.gender"></i>
          <i class="iconfont iconxingbienv" v-else></i>
          <span>{{ info.nickname }}</span>
        </p>
        <p class="date">{{ info.create_date }}</p>
      </div>
      <i class="iconfont iconjiantou1"></i>
    </div>
    <MyCell
      title="我的关注"
      dest="关注的用户"
      @handlerClick="handlerClick"
      to="/user_follow"
    ></MyCell>
    <MyCell
      title="我的跟帖"
      dest="跟帖/回复"
      @handlerClick="handlerClick"
      to="/user_comments"
    ></MyCell>
    <MyCell
      title="我的收藏"
      dest="文章/视频"
      @handlerClick="handlerClick"
      to="/user_star"
    ></MyCell>
    <MyButton type="danger" @fn="outFn">退出</MyButton>
  </div>
</template>

<script>
//复用组件
import MyCell from "../components/MyCell";
import MyButton from "../components/MyButton";
//Api
import { userParticulars } from "../apis/user.js";
//封装方法
import { removeToken } from "../utils/tokenData.js";
export default {
  data() {
    return {
      info: {},
    };
  },
  async created() {
    const id = this.$route.query.id;
    const res = await userParticulars(id);
    this.info = res.data.data;
  },
  methods: {
    handlerClick(to) {
      this.$router.push({
        path: to,
      });
    },
    outFn() {
      this.$dialog
        .confirm({
          title: "真的退出？",
        })
        .then(() => {
          this.$router.push({
            path: "/login",
          });
          removeToken();
        });
    },
  },
  components: {
    MyCell,
    MyButton,
  },
};
</script>

<style lang="less" scoped>
div.info {
  height: 80px;
  display: flex;
  align-items: center;
  margin: 0 20px;
  border-bottom: 5px solid rgb(189, 189, 189);
  div.avatar {
    height: 60px;
    width: 60px;
    border-radius: 40px;
    background-color: rgb(75, 233, 207);
  }

  div.center {
    flex: 1;
    margin-left: 15px;
    p.username {
      padding-bottom: 5px;
      i.iconfont.iconxingbienan {
        color: rgb(115, 115, 241);
      }
      i.iconxingbienv {
        color: rgb(250, 78, 207);
      }
      span {
        font-size: 16px;
      }
    }

    p.date {
      font-size: 14px;
      color: rgb(145, 137, 137);
    }
  }

  i.iconfont.iconjiantou1 {
    color: rgb(145, 137, 137);
  }
}
</style>

